<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<style type="text/css">
#canvas{
	background: #000;
}	
</style>				
	</head>
	<body>

<!-- 方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置
其中绘制渐变主要用到了 createLinearGradient() 方法，我们来看一下这个方法： context.createLinearGradient(x0,y0,x1,y1);

x0：开始渐变的 x 坐标
y0：开始渐变的 y 坐标
x1：结束渐变的 x 坐标
y1：结束渐变的 y 坐标 -->
	
		<canvas id="canvas" width="" height=""></canvas>
	
	
	<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var cx = canvas.width = 400;
    var cy = canvas.height = 400;

    var grd = context.createLinearGradient(0,0,0,400);
    grd.addColorStop(0,'rgb(255, 0, 0)');
    grd.addColorStop(0.2,'rgb(255, 165, 0)');
    grd.addColorStop(0.3,'rgb(255, 255, 0)');
    grd.addColorStop(0.5,'rgb(0, 255, 0)');
    grd.addColorStop(0.7,'rgb(0, 127, 255)');
    grd.addColorStop(0.9,'rgb(0, 0, 255)');
    grd.addColorStop(1,'rgb(139, 0, 255)');
    context.fillStyle = grd;
    context.fillRect(0,0,400,400);
		
	</script>
	</body>
</html>
